<template>
  <!-- APP风险分析 -->
  <div id="main" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
import { getAppRiskCount } from "@/api/applicationService/applicationScreen.js";
export default {
  name: "",
  data() {
    return {
      chart: null,
      trafficWay: [],
    };
  },
  mounted() {
    getAppRiskCount().then((res) => {
      this.trafficWay = res.data || [];
      this.initChart2();
    });
  },

  methods: {
    initChart2() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      const trafficWay = this.trafficWay;
      let sum = trafficWay.reduce((cur, pre) => {
        return cur + pre.value;
      }, 0);
      let data = [];
      let legendData = [];
      var color = [
        "#00ffff",
        "#409B5C",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
      ];
      for (var i = 0; i < trafficWay.length; i++) {
        let name = trafficWay[i].name;
        if(name!=='其他'){
          legendData.push(name);
        data.push({
          value: trafficWay[i].value,
          name: name,
          itemStyle: {
            borderWidth: 0,
            borderRadius: 10,
            shadowBlur: 10,
            borderColor: color[i],
            shadowColor: color[i],
          },
        });
        }
      }
      console.log("datadatadata11111111111111", data);

      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          padding: 2,
          icon: "rect",
          itemWidth: 8,
          itemHeight: 8,
          top: "2%", // 改为顶部显示
          left: "center", // 居中显示
          itemGap: 30, // 增加图例之间的间距
          textStyle: {
            color: "#333",
            fontSize: 12,
          },
          selectedMode: true, // 允许点击切换显示/隐藏
          data: legendData, // 明确指定图例数据
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped></style>
